<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="content-Type" content="text/html;charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="description" content="同乡烩后台管理系统"/>
    <title>同乡烩后台管理系统</title>
    <link rel="stylesheet" th:href="@{css/reset.css}"/>
    <link rel="stylesheet" th:href="@{css/main.css}"/>
    <link rel="stylesheet" th:href="@{css/list.css}"/>
    <script type="text/javascript" th:src="@{js/jquery-3.4.1.js}"></script>
    <script type="text/javascript">
        function getFileUrl(sourceId) {
            var url;
            if (navigator.userAgent.indexOf("MSIE") >= 1) { // IE
                url = document.getElementById(sourceId).value;
            } else if (navigator.userAgent.indexOf("Firefox") > 0) { // Firefox
                url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
            } else if (navigator.userAgent.indexOf("Chrome") > 0) { // Chrome
                url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
            }
            console.log(url);
            return url;
        }

        /**
         * 将本地图片 显示到浏览器上
         */
        function preImg(sourceId, targetId ,otherId) {
            var url = getFileUrl(sourceId);
            var imgPre = document.getElementById(targetId);
            var sour = document.getElementById(sourceId);
            imgPre.src = url;
            var image = document.getElementById(otherId);
            image.value=sour.files[0].name;
        }

        $(function () {
            var body_height = $(document).height();
            $(".main").css("height", body_height + "px");
            var val = $("#imgOne").val();
        })
    </script>
</head>
<!--菜品添加  -->
<body>
<div class="main">
    <div th:replace="admin/admin-left::left"/>
    <div class="main-left"></div>
    <!-- 展示 -->
    <div class="main-right">
        <div class="main-right-header"></div>
        <div class="main-right-navs">
            <a href="#">管理首页</a><a class="split">/</a><a>菜品管理</a><a>/</a><a>菜品添加</a>
        </div>
        <div class="margin-right-container margin-right-container1">
            <div class="section  section2">
                <div class="margin-right-container-nav margin-right-container-nav2 " style="height: 20rem">
                    <img id="imgPre" src="/images/sample.png"/>
                </div>
                <div class="margin-right-container-nav margin-right-container-nav2 margin-right-container-nav4">
                    <div class="input-group">
                        <input onchange="preImg(this.id,'imgPre','imageName');" name="imgOne" id="imgOne" type="file"/>
                    </div>
                    <form class="form" th:action="@{/addDishes}" method="post">
                        <input type="text" name="image" id="imageName" style="display:none" />
                        <div class="input-group">
                            <div class="input-group-left">菜品名称：</div>
                            <input class="input-group-right" name="name" type="text" placeholder="菜品名称" required/>
                            <div class="clear"></div>
                        </div>
                        <div class="input-group">
                            <div class="input-group-left">价格：</div>
                            <input class="input-group-right" name="price" type="text" placeholder="价格" required/>
                            <div class="clear"></div>
                        </div>
                        <div class="margin-right-container-nav5">
                            <button type="submit" class="sure">确认</button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <div class="clear"></div>
</div>
</body>
</html>
